<template>
  <div class="app-container">
    <el-form label-position="left" label-width="80px" :model="readerForm">
      <el-table
        :data="dataList"
        highlight-current-row
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="60"
        />
        <el-table-column
          property="fromTable"
          label="源端表"
          width="400"
        >
          <template #default="scope">
            <el-select v-model="scope.row.fromTable" filterable remote placeholder="Search" class="header-search-select" style="width: 300px">
              <el-option
                v-for="item in lTableList"
                :key="item.key"
                :label="item.label"
                :value="item.key"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
          property="toTable"
          label="目标表"
          width="400"
        >
          <template #default="scope">
            <el-select v-model="scope.row.toTable" filterable remote placeholder="Search" class="header-search-select" style="width: 300px">
              <el-option
                v-for="item in rTableList"
                :key="item.key"
                :label="item.label"
                :value="item.key"
              />
            </el-select>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'TableMapper',
  data() {
    return {
      mapperJson: {},
      fromTablesList: [],
      lTableList: [],
      toTablesList: [],
      rTableList: [],
      dataList: [],
      isConstNull: false,
      readerForm: {
        ltables: [],
        rtables: [],
        isIndeterminate: true
      }
    }
  },
  mounted() {
  },
  methods: {
    sendTables() {
      this.dataList = []
      this.lTableList = []
      this.rTableList = []
      if (this.fromTablesList.length > this.toTablesList.length) {
        for (let i = 0; i < this.fromTablesList.length; i++) {
          if (i < this.toTablesList.length) {
            this.dataList.push({ id: i + 1, fromTable: this.fromTablesList[i], toTable: this.toTablesList[i] })
            this.lTableList.push({ key: this.fromTablesList[i], label: this.fromTablesList[i] })
            this.rTableList.push({ key: this.toTablesList[i], label: this.toTablesList[i] })
          } else {
            this.dataList.push({ id: i + 1, fromTable: this.fromTablesList[i], toTable: null })
            this.lTableList.push({ key: this.fromTablesList[i], label: this.fromTablesList[i] })
          }
        }
      } else if (this.fromTablesList.length < this.toTablesList.length) {
        for (let i = 0; i < this.toTablesList.length; i++) {
          if (i < this.fromTablesList.length) {
            this.dataList.push({ id: i + 1, fromTable: this.fromTablesList[i], toTable: this.toTablesList[i] })
            this.lTableList.push({ key: this.fromTablesList[i], label: this.fromTablesList[i] })
            this.rTableList.push({ key: this.toTablesList[i], label: this.toTablesList[i] })
          } else {
            this.dataList.push({ id: i + 1, fromTable: null, toTable: this.toTablesList[i] })
            this.rTableList.push({ key: this.toTablesList[i], label: this.toTablesList[i] })
          }
        }
      } else {
        for (let i = 0; i < this.fromTablesList.length; i++) {
          this.dataList.push({ id: i + 1, fromTable: this.fromTablesList[i], toTable: this.toTablesList[i] })
          this.lTableList.push({ key: this.fromTablesList[i], label: this.fromTablesList[i] })
          this.rTableList.push({ key: this.toTablesList[i], label: this.toTablesList[i] })
        }
      }
    },
    handleSelectionChange(val) {
      this.readerForm.ltables = []
      this.readerForm.rtables = []
      this.isConstNull = false
      if (val.length > 0) {
        val.forEach(item => {
          if (item.fromTable == null || item.toTable == null) {
            this.isConstNull = true
          }
          this.readerForm.ltables.push(item.fromTable)
          this.readerForm.rtables.push(item.toTable)
          this.readerForm.isIndeterminate = true
        })
      } else {
        this.readerForm.isIndeterminate = false
      }
    },
    getIsConstNull() {
      return this.isConstNull
    },
    getLTables() {
      return this.readerForm.ltables
    },
    getRTables() {
      return this.readerForm.rtables
    },
    cleanData() {
      this.mapperJson = {}
      this.fromTablesList = []
      this.toTablesList = []
      this.lTableList = []
      this.rTableList = []
      this.dataList = []
      this.isConstNull = false
      this.readerForm = {
        ltables: [],
        rtables: [],
        isIndeterminate: true
      }
    }
  }
}
</script>
